<template>
  <div>
    <Header ref="header" @dateChange="handleDateChange" @weekChange="handleWeekChange"
            :weekNums="weekNum" :panelDateLen="panelDateLen"/>
    <div class="body">
  <!-- <Calendar :viewType="viewType" :currentDate="currentDate" />-->
      <month v-if="viewType=='month'" :viewType="viewType" :currentDate="currentDate" />
      <week v-if="viewType=='week'" ref="week"  :viewType="viewType" :currentDate="currentDate" :weekNums="weekNum"/>
      <days v-if="viewType=='day'" ref="days" :viewType="viewType" :currentDate="currentDate" />
      <year v-if="viewType=='year'" ref="year" :viewType="viewType" :currentDate="currentDate" @turnMonth="turnMonth"/>
      <schedule-list v-if="viewType=='schedule'" ref="schedule"  :viewType="viewType" :currentDate="currentDate"/>

    </div>
  </div>
</template>

<script>
  import Header from './tools/Header'
  // import Calendar from "./Calendar"
  import month from "./calendar/month"
  import week from "./calendar/week"
  import days from "./calendar/days"
  import year from "./calendar/year"
  import scheduleList from "./calendar/scheduleList";
  import { getMonthWeek } from "./utils/utils"
  export default {
    name: 'Schedule',
    components: {
      Header,
      // Calendar,
      month,
      week,
      days,
      year,
      scheduleList
    },
    data () {
      return {
        calendarView: 'day,week,month,year,schedule'.split(','),
        viewType: 'month',
        currentDate: new Date(),
        weekNum:0,
        panelDateLen:0,
      }
    },
    methods: {
      async handleDateChange (viewType, date) {
        this.viewType = this.calendarView[viewType]
        this.currentDate = new Date(date)
        if(this.viewType=='week'){
          let today = new Date(date); //获取当前时间
          let y = today.getFullYear();
          let m = today.getMonth() + 1;
          let d = today.getDate();
          this.setWeekNum(getMonthWeek(y,m,d)-1)
          setTimeout(()=>{
            this.panelDateLen = this.$refs.week.panelDateList.length;
          },200)
        }
      },
      // 周切换
      async handleWeekChange(index){
        let len = this.$refs.week.panelDateList.length;
        this.panelDateLen = len;
        let date = this.currentDate;
        if(index===len){
          date.setDate(1)
          this.currentDate = new Date(date.setMonth( date.getMonth() + 1 ));
          index = 0;
          this.setWeekNum(index)
        }else if(index<0){
          date.setDate(1)
          this.currentDate = new Date(date.setMonth( date.getMonth() - 1 ))
          index = 0;
          this.setWeekNum(index)
        }else{
          this.setWeekNum(index)
        }
      },
      setWeekNum(index){
        this.weekNum = index;
      },
      // 年度转月度
      turnMonth(month){
        const obj = this.$refs.header;
        console.log(obj)
        obj.active = 2;
        this.viewType = 'month';
        obj.currentDate = new Date(new Date(obj.currentDate).setMonth(month-1));
        this.currentDate = obj.currentDate;
      }


    }

  }
</script>

<style scoped>

</style>
